<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>tmall</title>
	<script type="text/javascript" src='./js/jquery.js'></script>
	<link rel="stylesheet" href="./css/style.css" />
	<script type="text/javascript">
		$(function(){
			$('#box').mouseenter(function(){
				$(this).find('.imgs').stop().animate({
					width:'806px'
				},1000);
				$('#box b').click(function(){
					$('#box').find('.imgs').stop().animate({
						width:'0px'
					},1000);
				})
			})
			$('#box').mouseleave(function(){
				$(this).find('.imgs').stop().animate({
					width:'0px'
				},1000);
			})
		})
	</script>
</head>
<body>
	<div id="box">
		<div class="img"><img src="./images/1.jpg"/></div>
		<div class="imgs">
			<div class="allItem">
				<div class="item1">
					<i></i>
					<img src="./images/2.jpg"/>
				</div>
				<div class="item2">
					<img src="./images/3.jpg"/>
				</div>
				<div class="item3">
					<img src="./images/4.jpg"/>
					<b></b>
				</div>
			</div>
		</div>
	</div>
</body>
</html>